<template>
  <view>
    <view class="comment-box">
      <view class="image">
        <image :src="item.userAndMajor.avatar" mode=""></image>
      </view>
      <view class="comment-main">
        <view class="name">
          {{item.userAndMajor.nickName}}
        </view>
        <view class="text">
          {{item.content}}
        </view>
        <view class="time">
          {{item.createTime}}
        </view>
      </view>
      <view class="good">
        <view class="image" @click="dianzan(item.commentId)">
          <image :src="item.is_CommentThumbs==1?'/static/dianzan-active.png':'/static/dianzan.png'  " mode=""></image>
        </view>
        <view class="value">
          {{item.thumbsCount}}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  export default {
    props: {
      item: Object
    },
    data() {
      return {
      }
    },
    methods: {
      async dianzan(id) {
        if (this.item.is_CommentThumbs == 0) {
          this.$emit('changeCommentDianzan', {
            id,
            count: 1
          })
         const data = await uni.$http.post(`/users/post/addCommentThumbs/${id}?studentId=${
            this.userInfo.studentId
          }`)
          console.log(data);
        } else {
          this.$emit('changeCommentDianzan', {
            id,
            count: -1
          })
          await uni.$http.delete(`/users/post/cancelCommentThumbs/${id}?studentId=${
            this.userInfo.studentId
          }`)
        }
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>
<style lang="scss">
  .comment-box {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
    box-sizing: border-box;

    .image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .good {
      display: flex;
      width: 100rpx;

      .image {
        width: 50rpx;
        height: 50rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .value {
        margin-top: 10rpx;
        margin-left: 5rpx;
        font-size: 26rpx;
      }
    }

    .comment-main {
      width: 500rpx;

      .name {
        margin: 5rpx 0;
        font-size: 32rpx;
        color: #007aff;
      }

      .time {
        margin-top: 5rpx;
        font-size: 26rpx;
        color: #999;
      }
    }

  }
</style>